﻿<Controls:CallingUserControl x:Class="Coding4Fun.FakeCall.Controls.InProgress"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:Controls="clr-namespace:Coding4Fun.FakeCall.Controls"
	xmlns:my="clr-namespace:Coding4Fun.FakeCall.Converters"
	xmlns:c4fConvert="clr-namespace:Coding4Fun.Phone.Controls.Converters;assembly=Coding4Fun.Phone.Controls"
    mc:Ignorable="d"
	Width="480"
	Height="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
    <Controls:CallingUserControl.Resources>
		<c4fConvert:ThemedImageConverter x:Key="ThemedImageConverter" />
		<c4fConvert:ThemedInverseImageConverter x:Key="ThemedInverseImageConverter" />
		<my:InverseBoolToVisibilityConverter x:Key="InverseBoolToVisibilityConverter" />
		<Controls:TimeSpanConverter x:Key="timeSpanConverter" />

		<Style x:Name="AppBarText" TargetType="TextBlock">
			<Setter Property="HorizontalAlignment" Value="Center" />
			<Setter Property="VerticalAlignment" Value="Center" />
			
			<Setter Property="FontSize" Value="20" />
			
		</Style>

		<ControlTemplate x:Key="callScreenPrimary" TargetType="ToggleButton">
			<Grid>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="CheckStates">
						<VisualState x:Name="Checked">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
									<DiscreteObjectKeyFrame KeyTime="0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Collapsed</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageInversed">
									<DiscreteObjectKeyFrame KeyTime="0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
									<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
									<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Unchecked">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
									<DiscreteObjectKeyFrame KeyTime="0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageInversed">
									<DiscreteObjectKeyFrame KeyTime="0">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Collapsed</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Indeterminate"/>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>

				<Border 
					Background="{TemplateBinding Background}"
					x:Name="ButtonBackground" 
					BorderBrush="{TemplateBinding BorderBrush}" 
					BorderThickness="3">

					<Grid>
						<Image 
							x:Name="imageNormal" 
							Stretch="None" 
							Source="{Binding Converter={StaticResource ThemedImageConverter}}" />
						<Image 
							x:Name="imageInversed"
							Stretch="None"
							Source="{Binding Converter={StaticResource ThemedInverseImageConverter}}" />
					</Grid>
				</Border>
			</Grid>
		</ControlTemplate>
		
		<ControlTemplate x:Key="callScreen" TargetType="ToggleButton">
			<Grid>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="CheckStates">
						<VisualState x:Name="Checked">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
									<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Unchecked" />
						<VisualState x:Name="Indeterminate"/>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				
				<Border 
					Background="{TemplateBinding Background}"
					x:Name="ButtonBackground" 
					BorderBrush="Transparent" 
					BorderThickness="3">
					<StackPanel VerticalAlignment="Center">
						<Grid>
							<Image 
								x:Name="imageNormal" 
								Stretch="None" 
								Source="{Binding Converter={StaticResource ThemedImageConverter}}" />
						</Grid>
						<TextBlock 
							x:Name="textObj"
							Style="{StaticResource AppBarText}" 
							Text="{TemplateBinding Content}" />
					</StackPanel>
				</Border>
			</Grid>
		</ControlTemplate>

		<Style x:Name="expandButtons" TargetType="ToggleButton">
			<Setter Property="BorderBrush" Value="Transparent" />
			<Setter Property="Background" Value="{StaticResource PhoneSubtleBrush}" />
			<Setter Property="Template" Value="{StaticResource callScreen}" />
		</Style>
	</Controls:CallingUserControl.Resources>
	<Grid>
		<Rectangle Fill="{StaticResource PhoneContrastForegroundBrush}" Opacity=".6" />
		<StackPanel>
			
			<Grid x:Name="LayoutRoot"  Background="{StaticResource PhoneChromeBrush}">
				<Grid.RowDefinitions>
					<RowDefinition />
					<RowDefinition Height="*"/>
					<RowDefinition Height="Auto" />
					<RowDefinition Height="Auto" />
				</Grid.RowDefinitions>
				<Controls:PhoneInfo VerticalAlignment="Top"/>
				<StackPanel VerticalAlignment="Bottom" Grid.Row="1" Margin="15,0">
					<Grid>
						<TextBlock 
						Foreground="{StaticResource PhoneAccentBrush}" 
						Text="{Binding Path=CurrentTicks, Converter={StaticResource timeSpanConverter}}" />
						<TextBlock 
						Margin="75,0,0,0"
							Visibility="{Binding ElementName=speakerButton, Path=IsChecked, Converter={StaticResource InverseBoolToVisibilityConverter}}"
							VerticalAlignment="Center" 
							Foreground="{StaticResource PhoneAccentBrush}">ON SPEAKER</TextBlock>
					</Grid>
					<TextBlock 
						FontSize="64" 
						Text="{Binding Path=Settings.PersonName}" />
					<StackPanel Orientation="Horizontal">
						<TextBlock FontSize="28" Text="{Binding Settings.PhoneType.Text}" />
						<TextBlock FontSize="28" Padding="0,0,5,0" Text=": " />
						<TextBlock FontSize="28" Text="{Binding Settings.PersonPhoneNumber}" />
					
					</StackPanel>
				</StackPanel>

				<!--ContentPanel - place additional content here-->
				<Grid x:Name="ContentGrid" Grid.Row="2" Margin="0,25,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="90" />
						<ColumnDefinition Width="90" />
					</Grid.ColumnDefinitions>
					<Button 
						Height="78"
						Content="end call" 
						Background="{StaticResource PhoneAccentBrush}" 
						Click="Button_Click" />
				   <ToggleButton 
					   Template="{StaticResource callScreenPrimary}"
					   Grid.Column="1"	
					   VerticalAlignment="Center"
					   HorizontalAlignment="Center"
					   DataContext="/Coding4Fun.FakeCall;component/Media/icons/{0}/pad.png" />
					<ToggleButton 
						Name="expandOptions"
						IsChecked="{Binding Settings.ExpandTalkOptions}"
						Template="{StaticResource callScreenPrimary}"
						Grid.Column="2" 
						VerticalAlignment="Center"
						HorizontalAlignment="Center"
						/>
				</Grid>
				<Grid Margin="5"
					Grid.Row="3" 
					Visibility="{Binding ElementName=expandOptions, Path=IsChecked, Converter={StaticResource InverseBoolToVisibilityConverter}}">
					<Grid.ColumnDefinitions>
						<ColumnDefinition />
						<ColumnDefinition />
						<ColumnDefinition />
					</Grid.ColumnDefinitions>
					<Grid.RowDefinitions>
						<RowDefinition Height="160" />
						<RowDefinition Height="160"  />
					</Grid.RowDefinitions>

					<ToggleButton 
						Style="{StaticResource expandButtons}"
						Grid.Row="0" 
						Grid.Column="0" 
						Content="speaker"
						Name="speakerButton"
						DataContext="/Coding4Fun.FakeCall;component/Media/icons/{0}/speaker.png" />
					<ToggleButton 
						Style="{StaticResource expandButtons}"
						Grid.Row="0" 
						Grid.Column="1" 
						Content="mute"
						DataContext="/Coding4Fun.FakeCall;component/Media/icons/{0}/mute.png" />
					<ToggleButton 
						Style="{StaticResource expandButtons}"
						Grid.Row="0" 
						Grid.Column="2" 
						Content="hold"
						DataContext="/Coding4Fun.FakeCall;component/Media/icons/{0}/hold.png" />

					<ToggleButton 
						Style="{StaticResource expandButtons}"
						Grid.Row="1" 
						Grid.Column="0" 
						Content="add call"
						DataContext="/Coding4Fun.FakeCall;component/Media/icons/{0}/add.call.png" />

				</Grid>
			</Grid>
		</StackPanel>
	</Grid>
</Controls:CallingUserControl>
